<template>
      <div class="home-box">
            <el-col :span="24" class="search-box">
                  <el-col :span="6" class="min-height"></el-col>
                  <el-col :span="12" class="min-height">
                        <el-col :span="3" class="min-height">
                              <el-select @change="toPage" v-model="search.classify" clearable placeholder="分类">
                                    <el-option v-for="item in classify" :key="item.id" :label="item.name" :value="item.id"></el-option>
                              </el-select>
                        </el-col>
                        <el-col :span="21" class="min-height">
                              <el-input @keyup.enter.native="toPage" placeholder="请输入要搜索的关键字" suffix-icon="el-icon-search" v-model="search.goodsName"></el-input>
                        </el-col>
                        
                  </el-col>
                  <el-col :span="6" class="min-height"></el-col>
            </el-col>
            <el-col :span="24">
                  <el-col :span="4" class="min-height"></el-col>
                  <el-col :span="16">
                        <el-col :span="6" class="goods-item" v-for="item in tableData" :key="item.id">
                              <el-col :span="24" class="goods-box" >
                                    <el-col :span="24" @click.native="showGood(item)">
                                          <el-col :span="24" class="goods-img">
                                                <!-- <el-image style="width: 100%; height: 230px" v-if="item.img.length==0" :src="$url+'/upload/none.png'" fit="fill"></el-image> -->
                                                <el-carousel trigger="click" height="230px" :autoplay="false">
                                                      <el-carousel-item v-for="(imgItem,index) in item.img"  :key="index">
                                                            <el-image style="width: 100%; height: 230px" :src="$url+(imgItem.path)" fit="contain"></el-image>
                                                      </el-carousel-item>
                                                </el-carousel>
                                          </el-col>
                                          <el-col :span="10" class="goods-price">￥{{item.goodsPrice}}</el-col>
                                          <el-col :span="14" class="goods-name">
                                                <el-tag type="success">{{item.classifyName}}</el-tag>
                                          </el-col>
                                          <el-col :span="24" class="goods-name">{{item.goodsName}}</el-col>
                                    </el-col>
                              </el-col>
                        </el-col>
                        <el-col :span="24" class="none-more">- 没有更多了 -</el-col>
                  </el-col>
                  <el-col :span="4" class="min-height"></el-col>
            </el-col>
      </div>
</template>

<script>
export default {
      props: [],
      data() {
            return {
                  loading: true,
                  page: 0,
                  pageSize: 10,
                  total: 0,
                  tableData: [],
                  classify:[],
                  formTitle: "",
                  formVisible: false,
                  inductsVisible: false,
                  pictureVisible:false,
                  form: {
                        id: "",
                        createTime: "",
                        updateTime: "",
                        creator: "",
                        goodsName: "",
                        goodsPrice: "",
                        description: "",
                        classify: "",
                        stock: "",
                  },
                  rules: {
                        id: [{ required: true, message: "请输入编号", trigger: "blur" }],
                        createTime: [
                              { required: true, message: "请输入创建时间", trigger: "blur" },
                        ],
                        updateTime: [
                              { required: true, message: "请输入更新时间", trigger: "blur" },
                        ],
                        creator: [{ required: true, message: "请输入创建人", trigger: "blur" }],
                        goodsName: [{ required: true, message: "请输入商品名称", trigger: "blur" }],
                        goodsPrice: [
                              { required: true, message: "请输入商品价格", trigger: "blur" },
                        ],
                        description: [{ required: true, message: "请输入描述", trigger: "blur" }],
                        classify: [{ required: true, message: "请输入分类", trigger: "blur" }],
                        stock: [{ required: true, message: "请输入库存", trigger: "blur" }],
                  },
                  formLabelWidth: "80px",
                  /** 弹出框标签宽度*/ isChange: false,
                  search: { id: "", creator: "", goodsName: "", classify: "" },
                  multipleSelection: [],
                  pageUrlPath: "/client/goods",
            };
      },
      methods: {
            showGood(item){
                  this.$router.push({
                        path:'/admin/showGoods/'+item.id
                  })
            },
            picture(row){
                  this.form=row;
                  this.pictureVisible=true;
            },
            initClassify(){
                  this.$axios.get(
                              this.$url +
                                    "client/classify/list?page=0&pageSize=100"
                        )
                        .then((response) => {
                              this.classify = response.data.data.list;
                        });
            },
            /**初始化字典 */ initDist() {
                  this.initClassify();
            },
            /**格式化日期 */ formatDate(timeStamp) {
                  let date = new Date(timeStamp);
                  let month =
                        date.getMonth() + 1 < 10
                              ? "0" + (date.getMonth() + 1)
                              : date.getMonth() + 1;
                  let day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
                  let hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
                  let minutes =
                        date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
                  return date.getFullYear() + "-" + month + "-" + day + " " + hours + ":" + minutes;
            },
            handleSizeChange(size) {
                  this.pageSize = size;
                  this.toPage();
            },
            init() {
                  this.toPage();
                  this.initDist();
            },
            toPage() {
                  this.loading = true;
                  let param = "";
                  Object.keys(this.search).map((key) => {
                        if (this.search[key] != undefined && this.search[key] != "") {
                              param += "&" + key + "=" + this.search[key];
                        }
                  });
                  this.$axios
                        .get(
                              this.$url +
                                    this.pageUrlPath +
                                    "/list?page=" +
                                    this.page +
                                    "&pageSize=" +
                                    this.pageSize +
                                    param
                        )
                        .then((response) => {
                              this.tableData = response.data.data.list;
                              
                              this.tableData.forEach(res=>{
                                    let img=[]
                                    res.img.forEach(imgItem=>{
                                          if(imgItem.isCover){
                                                img.push(imgItem);
                                          }
                                    })
                                    res.img=img;
                              })
                              this.total = response.data.data.total;
                              this.loading = false;
                        });
            },
            /**监听页码发生变化 */ changePage(e) {
                  this.page = e - 1;
                  this.toPage();
            },
            add() {
                  this.form = this.$options.data().form;
                  this.formTitle = "新增";
                  this.formVisible = true;
            },
            handleClose(done) {
                  this.$confirm("确认关闭？").then(() => {
                        done();
                  });
            },
            submit() {
                  this.$root.loading = true;
                  let formData = new FormData();
                  Object.keys(this.form).map((key) => {
                        if (this.form[key] != undefined && this.form[key] != "") {
                              formData.append(key, this.form[key]);
                        }
                  });
                  this.$axios({
                        method: "POST",
                        url: this.$url + this.pageUrlPath + "/add",
                        data: formData,
                  }).then((res) => {
                        if (res.data.status.code < 400) {
                              this.toPage();
                              this.formVisible = false;
                        }
                  });
            },
            edit(row) {
                  this.form = row;
                  this.formTitle = "编辑";
                  this.formVisible = true;
            },
            /*删除*/ del(row) {
                  this.$confirm("此操作将永久删除该信息, 是否继续?", "提示", {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        type: "warning",
                  }).then(() => {
                        this.$root.loading = true;
                        let format = new FormData();
                        format.append("ids", row.id);
                        this.$axios({
                              method: "DELETE",
                              data: format,
                              url: this.$url + this.pageUrlPath + "/del",
                        }).then((res) => {
                              if (res.data.status.code == 200) {
                                    this.toPage();
                              }
                        });
                  });
            },
            /**下载表 */ templateDownload() {
                  window.open(this.$url + this.pageUrlPath + "/template");
            },
            /**批量删除 */ delList() {
                  this.$confirm("此操作将永久删除信息, 是否继续?", "提示", {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        type: "warning",
                  }).then(() => {
                        this.$root.loading = true;
                        let format = new FormData();
                        this.multipleSelection.forEach((item) => {
                              format.append("ids", item.id);
                        });
                        this.$axios({
                              method: "DELETE",
                              data: format,
                              url: this.$url + this.pageUrlPath + "/del",
                        }).then((res) => {
                              if (res.data.status.code == 200) {
                                    this.toPage();
                              }
                        });
                  });
            },
            /**选择框 val为当前所有选择的内容数组 */ handleSelectionChange(val) {
                  this.multipleSelection = val;
            },
            /**点击批量导入 */ inducts() {
                  this.inductsVisible = true;
            },
            /**选择批量 */ inductsChange() {
                  let files = this.$refs.inducts.files;
                  /*获取选择的文件*/ let len = files.length;
                  /*文件个数*/ if (len != 1) {
                        this.$message({ message: "需要且只能上传一个文件", type: "warning" });
                        return;
                  }
                  let formData = new FormData();
                  formData.append("file", files[0]);
                  this.$axios({
                        method: "post",
                        url: this.$url + this.pageUrlPath + "/inducts",
                        data: formData,
                        headers: { "Content-Type": "multipart/form-data" },
                  })
                        .then((res) => {
                              /*上传成功后是否需要将选择的文件滞空*/ this.$refs.inducts.value = null;
                              if (res.data.status.code == 200) {
                                    this.inductsVisible = false;
                                    this.toPage();
                              }
                        })
                        .catch(() => {
                              this.$refs.inducts.value = null;
                              this.$message({
                                    message: "上传失败，请检查文件合法性！",
                                    type: "error",
                              });
                        });
            },
      },
      mounted() {
            this.init();
      },
};
</script>

<style lang="less" scoped>
.home-box{
      width: 100%;
      height: 100vh;
      padding-top: 50px;
      background-color: #F5F5F7;
      overflow: auto;
}
.search-box{
      width: 100%;
      height: 100px;
      text-align: center;
      padding: 0;
      margin: 0;

      .search{
            width: 800px;
            height: 40px;
            display: flex;
            box-sizing: border-box;
            border: 2px solid #409EFF;
            font-size: 16px;
            margin: 0 auto;

            .search-title{
                  flex: 2;
                  text-align: center;
                  line-height: 36px;
                  background-color: #F5F5F5;
                  font-size: 14px;
            }
            .search-input{
                  flex: 10;
                  input{
                        height: 36px;
                        margin: 0;
                        border: none 0;
                        outline: 0;
                        width: 100%;
                        padding-left: 14px;
                        padding: 0;
                  }
            }
            .search-button{
                  flex: 2;
                  line-height: 36px;
                  height: 36px;
                  font-weight: 700;
                  color: white;
                  background-color: #409EFF;
                  cursor: pointer;
            }
      }
}
.goods-item{
      padding: 10px;
      

      .goods-box{
            background-color: #fff;
            box-shadow: 2px 4px 12px rgb(0 0 0 / 8%);
            padding: 20px 10px;
            cursor: pointer;
            // height: 420px;
            width: 100%;
            border: 1px solid #EDEDED;
            border-radius: 10px;
            overflow: hidden;
            .goods-img{
                  width: 100%;
                  height: 230px;
            }
            .goods-price{
                  font-weight: 700;
                  color: var(--themeColor);
                  padding: 0 5px;
                  line-height: 50px;
                  height: 50px;
            }
            .goods-name{
                  font-size: 14px;
                  height: 80;
                  padding: 0 5px;
                  text-align: right;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  display: -webkit-box;
                  -webkit-line-clamp: 1;
                  -webkit-box-orient: vertical;
            }
      }
}
.none-more{
      line-height: 80px;
      font-size: 12px;
      color: rgb(160, 160, 160);
      text-align: center;
}
</style>